<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能表格管理系统 - 浙江传媒学院实验七</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
</head>
<body>
    <!-- 标题栏区域 -->
    <header class="header">
        <div class="header-content">
            <div class="header-left">
                <div class="logo">
                    <span class="logo-icon">🤖</span>
                    <div class="logo-text">
                        <h1>AI智能表格管理系统</h1>
                        <p>DeepSeek AI + 数据库 + Web开发综合应用</p>
                    </div>
                </div>
            </div>
            <div class="header-center">
                <div class="project-info">
                    <span>🎓 浙江传媒学院</span>
                    <span>👨‍🎓 作者：俞哲</span>
                    <span>👨‍🏫 指导：栗青生老师</span>
                </div>
                <div class="experiment-tag">实验七 - AI + 数据库 + Web开发综合应用</div>
            </div>
            <div class="header-right">
                <div class="status-indicator" id="statusIndicator">
                    <div class="status-dot connected" id="statusDot"></div>
                    <span id="statusText">AI已连接</span>
                </div>
                <div class="version-badge">v1.0.0</div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- AI对话区域 (左侧) -->
        <section class="chat-section">
            <div class="section-header">
                <h2>💬 与AI助手对话</h2>
                <div class="section-controls">
                    <button id="clearChatBtn" class="btn btn-secondary">清空对话</button>
                    <button id="showExamplesBtn" class="btn btn-primary">示例命令</button>
                </div>
            </div>
            <div class="chat-container">
                <div class="chat-messages" id="chatMessages">
                    <!-- 欢迎消息 -->
                    <div class="message system-message">
                        <div class="message-content">
                            <div class="message-text">
                                👋 欢迎使用AI智能表格管理系统！<br>
                                您可以用自然语言与我对话来管理学生信息表。
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-input-area">
                    <textarea id="chatInput" placeholder="请输入您的问题或指令，例如：添加一个学生..." rows="3"></textarea>
                    <button id="sendBtn" class="btn btn-primary">
                        <span>发送</span>
                        <span class="send-icon">📤</span>
                    </button>
                </div>
            </div>
        </section>

        <!-- 数据展示区域 (右侧) -->
        <section class="data-section">
            <!-- 统计信息面板 -->
            <div class="stats-panel" id="statsPanel">
                <h3>📊 数据统计</h3>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">👥</div>
                        <div class="stat-content">
                            <div class="stat-number" id="totalStudents">0</div>
                            <div class="stat-label">总学生数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">🎓</div>
                        <div class="stat-content">
                            <div class="stat-number" id="totalMajors">0</div>
                            <div class="stat-label">专业数量</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">📈</div>
                        <div class="stat-content">
                            <div class="stat-number" id="averageAge">-</div>
                            <div class="stat-label">平均年龄</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="actions-panel">
                <button id="addStudentBtn" class="btn btn-primary">➕ 添加学生</button>
                <button id="refreshDataBtn" class="btn btn-secondary">🔄 刷新数据</button>
                <button id="exportCsvBtn" class="btn btn-success">📥 导出CSV</button>
                <button id="sortByIdBtn" class="btn btn-outline">📊 按学号排序</button>
                <button id="showStatsBtn" class="btn btn-outline">📈 统计信息</button>
            </div>

            <!-- 学生数据表格 -->
            <div class="table-container">
                <div class="table-header">
                    <h3>📋 学生信息表</h3>
                </div>
                <div class="table-wrapper">
                    <table class="students-table">
                        <thead>
                            <tr>
                                <th class="sortable" data-sort="id">学号 <span class="sort-icon">↕️</span></th>
                                <th class="sortable" data-sort="name">姓名 <span class="sort-icon">↕️</span></th>
                                <th class="sortable" data-sort="age">年龄 <span class="sort-icon">↕️</span></th>
                                <th class="sortable" data-sort="major">专业 <span class="sort-icon">↕️</span></th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="studentsTableBody">
                            <!-- 动态内容 -->
                        </tbody>
                    </table>
                    <div class="table-loading hidden" id="tableLoading">
                        <div class="loading-spinner"></div>
                        <span>正在加载数据...</span>
                    </div>
                    <div class="table-empty hidden" id="tableEmpty">
                        <div class="empty-icon">📋</div>
                        <div class="empty-text">暂无学生数据</div>
                        <button class="btn btn-primary" onclick="document.getElementById('addStudentBtn').click()">添加第一个学生</button>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 示例命令模态框 -->
    <div class="modal hidden" id="examplesModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>💡 示例命令</h3>
                <button class="modal-close" id="closeExamplesModal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="examples-grid">
                    <div class="example-item" data-command="添加一个学生，姓名张三，年龄20，专业计算机科学">
                        <div class="example-title">添加学生</div>
                        <div class="example-text">添加一个学生，姓名张三，年龄20，专业计算机科学</div>
                    </div>
                    <div class="example-item" data-command="查询所有计算机专业的学生">
                        <div class="example-title">查询学生</div>
                        <div class="example-text">查询所有计算机专业的学生</div>
                    </div>
                    <div class="example-item" data-command="删除学号为1的学生记录">
                        <div class="example-title">删除学生</div>
                        <div class="example-text">删除学号为1的学生记录</div>
                    </div>
                    <div class="example-item" data-command="修改张三的年龄为21">
                        <div class="example-title">修改信息</div>
                        <div class="example-text">修改张三的年龄为21</div>
                    </div>
                    <div class="example-item" data-command="显示年龄大于20的学生">
                        <div class="example-title">条件查询</div>
                        <div class="example-text">显示年龄大于20的学生</div>
                    </div>
                    <div class="example-item" data-command="统计各个专业的学生数量">
                        <div class="example-title">统计数据</div>
                        <div class="example-text">统计各个专业的学生数量</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 学生信息模态框 -->
    <div class="modal hidden" id="studentModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="studentModalTitle">➕ 添加学生</h3>
                <button class="modal-close" id="closeStudentModal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="studentForm" class="student-form">
                    <input type="hidden" id="editStudentId">
                    <div class="form-group">
                        <label for="studentName">姓名 *</label>
                        <input type="text" id="studentName" name="name" required placeholder="请输入学生姓名">
                    </div>
                    <div class="form-group">
                        <label for="studentAge">年龄 *</label>
                        <input type="number" id="studentAge" name="age" required min="16" max="100" placeholder="请输入年龄">
                    </div>
                    <div class="form-group">
                        <label for="studentMajor">专业 *</label>
                        <input type="text" id="studentMajor" name="major" required placeholder="请输入专业名称">
                    </div>
                    <div class="form-actions">
                        <button type="button" id="cancelStudentBtn" class="btn btn-secondary">取消</button>
                        <button type="submit" id="saveStudentBtn" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div class="modal hidden" id="confirmModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>⚠️ 确认删除</h3>
                <button class="modal-close" id="closeConfirmModal">&times;</button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage">确定要删除这条学生记录吗？此操作不可撤销。</p>
                <div class="form-actions">
                    <button type="button" id="cancelDeleteBtn" class="btn btn-secondary">取消</button>
                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本文件 -->
    <script src="js/app.js"></script>
</body>
</html>